<template>
  <div class="analysis">
    <a-row>
      <a-col>
        <a-select placeholder="年份" v-model="queryParams.year"  style="width: 200px;" @change="changeOptions">
          <a-select-option v-for="(d, index) in yearOptions" :key="index" :value="d.dictValue">{{ d.dictLabel }}</a-select-option>
        </a-select>
      </a-col>
    </a-row>
    <a-row style="margin-top: 0" :gutter="[24, 24]">
      <!-- 业绩目标 -->
      <a-col :sm="24" :md="12" :xl="6">
        <chart-card :loading="loading" :title="'业绩目标'" :total="target">
          <a-tooltip :title="'业绩目标'" slot="action">
              <a-icon type="info-circle-o"/>
          </a-tooltip>
        </chart-card>
      </a-col>
      <!-- 已完成业绩 -->
      <a-col :sm="24" :md="12" :xl="6">
        <chart-card :loading="loading" :title="'已完成业绩'" :total="completedTotal">
          <a-tooltip :title="'已完成业绩'" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-bar
              ref="miniArea"
              :dataSet="monthCompletedOptions"
              :position="'月份*业绩'"
            />
          </div>
        </chart-card>
      </a-col>
      <!-- 业绩完成百分比 -->
      <a-col :sm="24" :md="12" :xl="6">
        <chart-card :loading="loading" :title="'业绩完成度'" :total="percentage + '%'">
          <a-tooltip :title="'业绩完成度'" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-progress target="100" :percent="percentage" color="#13C2C2" height="8px"/>
          </div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6">
        <chart-card :loading="loading" :title="'学员数量'" :total="studentTotal">
          <a-tooltip :title="'学员数量'" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-area
              ref="miniArea"
              :position="'月份*数量'"
              :dataSet="studentCountOptions"
            />
          </div>
        </chart-card>
      </a-col>
    </a-row>
    <a-card :loading="loading" style="margin-top: 24px" :bordered="false" :body-style="{padding: '24px'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}" @change="tabsChange">
          <!-- <div class="extra-wrap" slot="tabBarExtraContent">
            <div class="extra-item">
              <a @click="changeRank(0,1)">月度</a>
              <a @click="changeRank(0,2)">年度</a>
            </div>
          </div> -->
          <a-tab-pane loading="true" :tab="'销售额'" key="1">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar
                  ref="bar"
                  :title="'销售额趋势'"
                  :position="saleP"
                  :dataSet="deptRankOptions"
                  :tickInterval="10000"
                />
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <ranking-list :title="'销售排行榜'" :list="rankList" />
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane :tab="'学生数量'" key="2" >
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar
                    ref="bar"
                    :title="'学员数量趋势'"
                    :position="countP"
                    :dataSet="deptRankOptions"
                    :tickInterval="10"
                  />
              </a-col>
                <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <ranking-list :title="'学员数量排行榜'" :list="rankList"/>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
    <a-row style="margin: 0 -12px">
      <a-col style="padding: 0 12px" :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card :loading="loading" :bordered="false" style="margin-top: 24px" :title="'人员业绩'">
          <rank ref="rank" :data="userRnakList" :position="'姓名*业绩'"/>
          <a-radio-group slot="extra" style="margin: -12px 0" v-model="userType" @change="userPerformRank">
            <a-radio-button value="0">所有</a-radio-button>
            <a-radio-button value="2">销售</a-radio-button>
            <a-radio-button value="1">教练</a-radio-button>
          </a-radio-group>
        </a-card>
      </a-col>
      <a-col style="padding: 0 12px" :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card :loading="loading" :bordered="false" style="margin-top: 24px;" :title="'渠道占比'">
          <sales-data :ref="salesData" :data="channelList"/>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import ChartCard from '../components/card/ChartCard'
import MiniArea from '../components/card/MiniArea'
import Rank from '../components/card/Rank'
import MiniBar from '../components/card/MiniBar'
import MiniProgress from '../components/card/MiniProgress'
import Bar from '../components/card/Bar'
import RankingList from '../components/card/RankingList'
import HotSearch from './HotSearch'
import SalesData from './SalesData'
import Trend from '../components/card/Trend'
import {homePageReprt,deptRank,getUserReport,getChannelReport} from '@/api/manager/report'
import storage from'store'
import moment from 'moment'


export default {
  name: 'Index',
  data () {
    return {
      yearOptions:[],
      queryParams:{
        year:''
      },
      currentDeptid:null,
      target:null,
      monthCompletedOptions:[],
      completedTotal:0,
      totalSales:'人员业绩',
      loading: false,
      studentCountOptions:[],
      studentTotal:0,
      percentage:0,
      deptRankOptions:[],
      rankList:[], 
      rankParam:{
        rankType: 1,
        timeType:2
      },
      userRnakList:[],
      userType:0,
      channelList:[],
      saleP:'校区*业绩',
      countP:'校区*数量'
    }
  },
  created() {
    this.getDicts('year').then(response => {
      this.yearOptions = response.data
    })
    this.queryParams.year = moment().year() + "";
    this.getStudentCountOptions();
    this.getDeptRank();
    this.userPerformRank();
    this.channelReport();
    this.currentDeptid = storage.get("deptId");
    this.saleP = this.currentDeptid == 100 ? '校区*业绩' : '销售*业绩';
    this.countP = this.currentDeptid == 100 ? '校区*数量' : '销售*数量';
    
  },
  methods: {
    changeOptions(){
      this.getStudentCountOptions();
      this.getDeptRank();
      this.userPerformRank();
      this.channelReport();
    },
    channelReport(){
      getChannelReport({year:this.queryParams.year}).then(resp => {
        this.channelList = resp.data;
      });
    },
    userPerformRank(){
      getUserReport({type:this.userType,year:this.queryParams.year}).then(resp => {
        this.userRnakList = resp.data;
      });
    },
    tabsChange(ob){
        if(ob == 1){
          this.changeRank(1,0)
        }else{
          this.changeRank(2,0)
        }
    },
    changeRank(rankType,timeType){
        if(rankType != 0){
          this.rankParam.rankType = rankType;
        }if(timeType != 0){
          this.rankParam.timeType = timeType;
        }
        this.getDeptRank();
    },
    getDeptRank(){
      this.rankParam.year = this.queryParams.year
      deptRank(this.rankParam).then(resp => {
        this.rankList = resp.data.rankList;
        this.deptRankOptions = resp.data.deptRankList;
      });
    },
    getStudentCountOptions(){
      homePageReprt({year:this.queryParams.year}).then(resp => {
        //业绩目标
        this.target = resp.data.target;
        //已完成业绩
        this.completedTotal = resp.data.completed;
        //每个月的业绩
        this.monthCompletedOptions = resp.data.monthCompleted;
        //业绩完成度
        this.percentage = resp.data.percentage;
        //学生数量
        this.studentTotal = resp.data.studentTotal;
        this.studentCountOptions = resp.data.studentDataSet;
      });
    },
  },
  components: {Trend, SalesData, HotSearch, RankingList, Bar, MiniProgress, MiniBar, MiniArea, ChartCard,Rank}
}
</script>

<style lang="less" scoped>
  .extra-wrap{
    .extra-item{
      display: inline-block;
      margin-right: 24px;
      a:not(:first-child){
        margin-left: 24px;
      }
    }
  }
  @media screen and (max-width: 992px){
    .extra-wrap .extra-item{
      display: none;
    }
  }
  @media screen and (max-width: 576px){
    .extra-wrap{
      display: none;
    }
  }

</style>
